﻿@using BonjourQuotation.UI.Models
@model OperationViewModel

@{
    ViewBag.Title = "Operation";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Scripts.Render("~/Scripts/UIScript/Operation.js")
    @Styles.Render("~/Content/jquery.handsontable.full.css")
    @Scripts.Render("~/Scripts/jsmodel.1.0.0.js")
    @Scripts.Render("~/Scripts/Handsontable/jquery.handsontable.full.js")
    @Scripts.Render("~/Scripts/jquery.zeroclipboard.js")
}

<div class="container">
        @if (Model.Message != null)
        {
            @Html.LabelForModel(Model.Message)
        }
        <div id="ErrorMessageDiv"> </div>
        
    
    <div id="AutoCompleteDiv" style="text-align: left; display: none; z-index: 999999 !important;"></div>
    <div class="row form-row" id="Tabs" style="margin-top: 10px; margin-left:10px !important; width:1185px !important; ">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabHotels" class="OperationTabs" data-toggle="tab">Hotels</a></li>
            <li><a id="Rooms" href="#tabRooms" class="OperationTabs" data-toggle="tab">Rooms</a></li>
            <li><a href="#tabAttractions" class="OperationTabs" data-toggle="tab">Attractions/Restaurants</a></li>
            <li><a href="#tabMisc" class="OperationTabs" data-toggle="tab">Misc</a></li>
            <li><a href="#tabBus" class="OperationTabs" data-toggle="tab">Bus</a></li>
            <li><a id="VendorConfirm" href="#tabVendorConfirm" class="OperationTabs" data-toggle="tab">Vendor Confirmation</a></li>
            <li><a id="Invoice" href="#tabInvoice" class="OperationTabs" data-toggle="tab">Invoice</a></li>
            <li><a href="#tabTechProg" class="OperationTabs" data-toggle="tab">Tech Prog</a></li>
            <li><a href="#tabGroupCheckList" class="OperationTabs" data-toggle="tab">Group CheckList</a></li>
        </ul>
        <div style="padding-top:5px;" class="pull-right">
            @Html.TextBoxFor(model => Model.OperGroupCode, new { @class = "TxtComplete table_inputs_180", @placeholder = "Group Code" })
            <button class="btn14 btn50 btnheight22" style="margin-bottom:2px;" onclick="OperMainGroupCodeClick()" type="button">-></button>
        </div>
        <div class="tab-content" style="margin-top: 33px">
            <div class="tab-pane fade active in" id="tabHotels" style="max-height: 760px; overflow-y: auto; overflow-x: hidden; z-index: 1000; " >           
            </div>
            <div class="tab-pane fade" id="tabRooms" style="max-height:770px;">

            </div>
            @*<div class="tab-pane fade" id="tabRooms" style="max-height:500px; overflow:auto; z-index:1000; ">
            </div>*@
            <div class="tab-pane fade" id="tabAttractions" style="max-height:700px;">

            </div>
            <div class="tab-pane fade" id="tabMisc" style="max-height:700px;">

            </div>
            <div class="tab-pane fade" id="tabBus" style="max-height:700px;">

            </div>
            <div class="tab-pane fade" id="tabVendorConfirm">
                <div class="OperationTabsTitleDiv">
                    <span class="OperationTabsTitle">Vendor Confirmation</span>
                </div>
                <div class="row form-row" id="TabsAttrBusConfirm" style="margin-top: 10px; width: 1200px !important; padding-left: 25px; ">
                </div>
                    <div class="row form-row" id="TabsVendorConfirm" style="margin-top: 10px; width: 1200px !important; padding-left: 25px; ">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tabConfirmation" class="VcnfTabs" data-toggle="tab">Confirmation</a></li>
                            <li><a href="#tabRoomingList" class="VcnfTabs" data-toggle="tab">Rooming List</a></li>
                        </ul>
                        <div id="VendorConfirmationInfo"></div>
                        <div class="tab-content" style="margin-top: 20px">
                            <div class="tab-pane fade active in" id="tabConfirmation" style="max-height:700px; overflow:auto; z-index:1000; ">

                            </div>
                            <div class="tab-pane fade" id="tabRoomingList" style="max-height:580px;">

                            </div>
                        </div>
                    </div>
                </div>
            <div class="tab-pane fade" id="tabInvoice" style="max-height:710px;">
            </div>
            <div class="tab-pane fade" id="tabTechProg" style="max-height:710px;">
            </div>
            <div class="tab-pane fade" id="tabGroupCheckList" style="max-height:700px;">
            </div>
    </div>
       
        <div id="LoadingDiv" style="display:none;">
            <img alt="loading" src="../../Content/Images/AjaxLoader.gif" />
        </div>

</div>
</div>